A scatterplot displays the relationship between 2 numeric variables. For each data point, the value of its first variable is represented on the X axis, the second on the Y axis.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"y" : {
"data" : [
[18,76.1],
[19,77],
[20,78.1],
[21,78.2],
[22,78.8],
[23,79.7],
[24,79.9],
[25,81.1],
[26,81.2],
[27,81.8],
[28,82.8],
[29,83.5]
],
"smps" : ["Age","Height"],
"vars" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12"]
}
}
<-- Create the configuration for the graph -->
var config = {
"citation":"Moore, David S., and George P. McCabe (1989)",
"citationScaleFontFactor":0.75,
"graphType":"Scatter2D",
"showRegressionFit":"true",
"theme":"CanvasXpress",
"title":"Mean heights of a group of children in Kalama",
"xAxis":[
"Age"
],
"yAxis":[
"Height"
]
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-ageheightt-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
citation="Moore, David S., and George P. McCabe (1989)",
citationScaleFontFactor=0.75,
graphType="Scatter2D",
showRegressionFit=TRUE,
theme="CanvasXpress",
title="Mean heights of a group of children in Kalama",
xAxis=list("Age"),
yAxis=list("Height")
)